<!DOCTYPE html>
<html>
<head>
	<title>个人基本信息</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="fpnr.css">
	<link rel="shortcut icon" type="images/x-icon" href="images/favicon.ico">
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
	<script type="text/javascript" src="jquery.min.js"></script>
	<style type="text/css">
		.guanli{
			height: 960px;
			background-color: #ffffff;
			overflow: hidden;
		}
		.search{
			margin:12px auto;
			text-align: center;
		}
		.item{
			display: none;
		}
		.change span{
			cursor:pointer;
			transition: all .5s;
		}
		.change span:hover{
			color:#f43c43;
		}
		button{
			width: 80px;
			height: 40px;
			border-radius: 5px;
			text-align: center;
			line-height: 40px;
			background-color:#f43c43;
			color: yellow;
			border: none;
			cursor: pointer;
			outline: none;
			margin-left: 50px;
		}
		button:hover{
			color: #ffffff;
		}
		input{
			height: 40px;
			width: 300px;
			outline: none;
			margin-right: 50px;
			border:1px solid #f43c43;
			border-radius: 5px;

		}
		.zengjia{
			display: none;
			height:854px;
			width: 100%;
			background-color: #ffffff;
			position: absolute;

		}
		.zj{
			padding: 20px;
			margin:0px auto;
			width: 650px;
		}
		.zengjia1{
			display: block;
			top: 105px;
			left: 0px;
		}
	</style>
	<script>
		$(function(){
			$.ajax({
				url:"http://192.168.0.117:81/Accountnumber",
				success:function(data){
					var data = JSON.parse(data);
					A = data[0].Accountnumber;
					$(".user").html(data[0].Accountnumber);
					$($("P")[4]).append($("<span></span>"));
				}
			})
			//获取所有信息
			function huoqu(){
				$.ajax({
					url:"http://192.168.0.117:81/information",
					success:function(data){
						var data = JSON.parse(data);
						for (var i = 0;i < data.length;i++){
							var newTr = $(".item").clone(true);
							newTr.removeClass();
							newTr.addClass("ever");
							$($(newTr)[0].querySelector(".IDnumber")).html(data[i].IDnumber);
							$($(newTr)[0].querySelector(".Sex")).html(data[i].Sex);
							$($(newTr)[0].querySelector(".Name")).html(data[i].Name);
							$($(newTr)[0].querySelector(".Telephone")).html(data[i].Telephone);
							$($(newTr)[0].querySelector(".Accountnumber")).html(data[i].Accountnumber);
							$($(newTr)[0].querySelector(".Document_type")).html(data[i].Document_type);
							$($(newTr)[0].querySelector(".Password")).html(data[i].Password);
							$($(newTr)[0].querySelector(".Password1")).html(data[i].Password1);
							$($(newTr)[0].querySelector(".Email")).html(data[i].Email);						
							$("tbody").append(newTr);
						}
					},
					error:function(data){
						alert("操作失败！")
					}
				})
			}
			huoqu()
			var islock = true;
			$("td").click(function(){
				if(islock){
					if(!$(this).hasClass("change") && !$(this).hasClass("Accountnumber")){
						var _this = this;
						var tdCopy = $(this).html();
						$(this).html("");
						$(this).append($("<input type='' name=''>"));
						$("input").focus();
						islock = false;
						$("tbody input").val(tdCopy);
						$("tbody input").blur(function(){
							var txt = $("tbody input").val();
							$(_this).html(txt);
							islock = true;
						})
					}
				}
			})
			//搜索
			$(".search1").click(function(){
				$.ajax({
					url:"http://192.168.0.117:81/search",
					data:{
						message:$("input").val()
					},
					success:function(data){
						var data = JSON.parse(data);
						console.log(data)
						var newTr = $(".item").clone(true);
						$("tbody tr")[1].remove();
						$(".ever").remove();

						newTr.removeClass("item");
						$($(newTr)[0].querySelector(".IDnumber")).html(data[0].IDnumber);
						$($(newTr)[0].querySelector(".Sex")).html(data[0].Sex);
						$($(newTr)[0].querySelector(".Name")).html(data[0].Name);
						$($(newTr)[0].querySelector(".Telephone")).html(data[0].Telephone);
						$($(newTr)[0].querySelector(".Document_type")).html(data[0].Document_type);
						$($(newTr)[0].querySelector(".Password")).html(data[0].Password);
						$($(newTr)[0].querySelector(".Password1")).html(data[0].Password1);
						$($(newTr)[0].querySelector(".Email")).html(data[0].Email);

						$("tbody").append(newTr);
					},
					error:function(){
						alert("没有该数据！")
					}
				})

			})
			//修改
			$(".xiugai").click(function(){
				var ntr = $(this).parent().parent()			
				IDnumber1 = ntr.find(".IDnumber").html();
				Name1 = ntr.find(".Name").html();
				Sex1 = ntr.find(".Sex").html();
				Accountnumber1 = ntr.find(".Accountnumber").html();
				Document_type1 =ntr.find(".Document_type").html();
				Telephone1 = ntr.find(".Telephone").html();
				Password1 = ntr.find(".Password").html();
				Password2 = ntr.find(".Password1").html();
				Email1 = ntr.find(".Email").html();

				$.ajax({
					url:"http://192.168.0.117:81/changeData",
					data:{					
						IDnumber:IDnumber1,
						Name:Name1,
						Sex:Sex1,
						Accountnumber:Accountnumber1,
						Document_type:Document_type1,
						Telephone:Telephone1,
						Password:Password1,
						Password1:Password2,
						Email:Email1
					},
					success:function(data){
						alert("修改成功！")
					},
					error:function(){
						alert("修改信息失败,账号无法修改！")
					}
				})
			})
			//删除
			$(".delete").click(function(){
				var deleteTr = $(this).parent().parent()			
				Accountnumber1 = deleteTr.find(".Accountnumber").html();
				$.ajax({
					url:"http://192.168.0.117:81/deleteData",
					data:{					
						Accountnumber:Accountnumber1	
					},
					success:function(data){
						deleteTr.remove()
						alert("删除成功！")
					},
					error:function(){
						alert("删除失败！")
					}
				})
			})
			//增加
			$(".a").click(function(){
				$(".zengjia").addClass("zengjia1");
			})
			$(".button1").click(function(){
				var arr = [];
				$(".zengjia input").each(function(index,element){
					arr[index] = this.value;
				})
				$.ajax({
					url:"http://192.168.0.117:81/add",
					data:{
						Name:arr[0],
						Sex:$("select")[0].value,
						Telephone:arr[1],
						Accountnumber:arr[2],
						Password:arr[3],
						Password1:arr[4],
						Document_type:$("select")[1].value,
						IDnumber:arr[5],
						Email:arr[6]
					},
					success:function(data){	
						console.log(data)
						if($("tbody tr").hasClass("#item")){
							$("tbody tr").remove();	
							
						}
						$(".zengjia1").removeClass("zengjia1");
						if(data == "error"){
							alert("插入失败！")
						}
						else{
							alert("插入成功！")
							huoqu()
						}
					},
					error:function(){
						alert("插入失败！")
					}
				})
			})
		})
	</script>
</head>
<body>
	<div class="content xg">
		<div class="top">
			<img src="images/u=576006878,3397872292&fm=26&gp=0.jpg">
			<span class="mc">精准扶贫贫困户档案管理&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;个人基本信息</span>
			<div class="topa">
				<a href="#" class="user">管理员</a>
				<a href="../index.html">退出</a>
			</div>
		</div>
		<div class="guanli">
			<div class="search">
				<input type="" name="" placeholder="请通过名字搜索" style="text-indent: 2em;" class="search2">
				<button class="search1">搜索</button>
				<button class="a">增加</button>
			</div>
			<table class="table table-hover">
				<thead>
					<tr>
						<th>身份证号</th>
						<th>姓名</th>
						<th>性别</th>
						<th>手机号</th>
						<th>证件类型</th>
						<th>账号</th>
						<th>密码</th>
						<th>确认密码</th>
						<th>个人邮箱</th>
						<th>修改/删除</th>
					</tr>
				</thead>
				<tbody>
					<tr class="item">
						<td class="IDnumber"></td>
						<td class="Name"></td>
						<td class="Sex"></td>
						<td class="Telephone"></td>
						<td class="Document_type"></td>
						<td class="Accountnumber"></td>
						<td class="Password"></td>
						<td class="Password1"></td>
						<td class="Email"></td>
						<td class="change">
							<span class="xiugai">修改</span>
							<span class="delete">删除</span>
						</td>
					</tr>
				</tbody>
			</table>
			<div class="zengjia">
					<div class="zj">
						<div class="nr1">
							<p>&nbsp;&nbsp;&nbsp;<i>*</i>真实姓名：</p><input type="text" name="" placeholder="请如实填写。">
						</div>
						<div class="nr1">
							<p>&nbsp;&nbsp;&nbsp;<i>*</i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;性别：</p>
							<form action="">
								<select name="cars">
									<option value="请选择">请选择</option>
									<option value="男">男</option>
									<option value="女">女</option>
								</select>
							</form>
						</div>
						<div class="nr1">
							<p><i>*</i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;手机号：</p><input type="text" name="" placeholder ="请输入11位手机号码。">
						</div>
						<div class="nr1">
							<p>&nbsp;&nbsp;&nbsp;<i>*</i>用户账号：</p><input type="text" name="" placeholder="请输入11位数字">
						</div>
						<div class="nr1">
							<p>&nbsp;&nbsp;&nbsp;<i>*</i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;密码：</p><input type="password" name="" placeholder ="输入8-30位的英文字母、数字或字符">
						</div>
						<div class="nr1">
							<p>&nbsp;&nbsp;&nbsp;<i>*</i>密码确认：</p><input type="password" name="" placeholder="请再一次的填写密码。">
						</div>	
						<div class="nr1">
							<p>&nbsp;&nbsp;&nbsp;<i>*</i>证件类型：</p>
							<form action="">
								<select name="cars">
									<option value="请选择">请选择</option>
									<option value="二代身份证">二代身份证</option>
									<option value="临时身份证">临时身份证</option>
								</select>
							</form>
						</div>
						<div class="nr1">
							<p>&nbsp;&nbsp;&nbsp;<i>*</i>身份证号：</p><input type="text" name="" placeholder="请如实填写。">
						</div>
						<div class="nr1">
							<p>&nbsp;&nbsp;&nbsp;<i>*</i>电子邮箱：</p><input type="text" name="" placeholder="填写个人邮箱。">
						</div>
						<button class="button1">提交信息</button>
					</div>
				</div>
			</div>
		</div>
			
		<div class="bottom"><strong>精准扶贫贫困户档案管理系统</strong><span class="zy">注意：请勿重复注册，仔细核对个人信息，非精准扶贫对象无法注册!</span></div>
	</div>
</body>
</html>	